import { /*RFValue*/ } from "react-native-responsive-fontsize";
import styled, { css } from "styled-components/native";
import { ButtonProps } from "./Button";

interface ContainerProps {
  type: ButtonProps["type"];
}

export const Container = styled.TouchableOpacity<ContainerProps>`
  width: 100%;
  height: ${/*RFValue*/(50)}px;
  background-color: ${({ theme }) => theme.colors["create_button"]};
  border-radius: ${/*RFValue*/(16)}px;
  align-items: center;
  justify-content: center;

  ${({ type, theme }) =>
    type === "outline" &&
    css`
      background-color: transparent;
      border: 1px solid ${theme.colors["primary-variant"]};
    `}
`;

export const ButtonText = styled.Text<ContainerProps>`
  color: rgba(65, 79, 102, 1);
  font-family: HarmonyOS_Sans_SC_Regular;
  font-size: ${/*RFValue*/(14)}px;
  font-weight: 700;
  font-family: ${({ theme }) => theme.fonts.create};
`;
